<template>
	<p class="submenu-item" :style="is_hover && hover_color ?'color:'+hover_color:''" @mouseover="mouseHover" @mouseout="mouseOut" @click="clickHandle" @touchend="clickHandle">
		<span><slot></slot></span>
	</p>
</template>
<script>
	export default {
		props: {
			router_name: {
				default: ''
			},
			hover_color: {
				default: ''
			}
		},
		data() {
			return {
				is_hover: false
			}
		},
		methods: {
			mouseHover() {
				this.is_hover = true;
			},
			mouseOut() {
				this.is_hover = false;
			},
			clickHandle() {
				if(this.router_name) {
					this.$router.push({name:this.router_name});
				}
				this.$emit('submenuClick');
			}
		}
	}
</script>